<template>
  <div class="user-profile-container">
    <a-spin :spinning="loading">
      <div v-if="userInfo" class="user-profile">
        <!-- 用户信息头部 -->
        <div class="user-header">
          <a-avatar 
            :src="userInfo.avatar" 
            :size="120"
            class="user-avatar"
          >
            {{ userInfo.nickname?.charAt(0) || 'U' }}
          </a-avatar>
          <div class="user-info">
            <h1>{{ userInfo.nickname }}</h1>
            <p class="username">@{{ userInfo.username }}</p>
            <p v-if="userInfo.bio" class="bio">{{ userInfo.bio }}</p>
            <div class="user-meta">
              <span class="join-date">
                加入时间：{{ formatDate(userInfo.createdAt) }}
              </span>
              <a v-if="userInfo.website" :href="userInfo.website" target="_blank" class="website">
                个人网站
              </a>
            </div>
          </div>
        </div>

        <!-- 用户统计 -->
        <div class="user-stats">
          <div class="stat-item">
            <div class="stat-number">{{ userStats.postCount }}</div>
            <div class="stat-label">文章</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">{{ userStats.likeCount }}</div>
            <div class="stat-label">获赞</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">{{ userStats.viewCount }}</div>
            <div class="stat-label">浏览量</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">{{ userStats.commentCount }}</div>
            <div class="stat-label">评论</div>
          </div>
        </div>

        <!-- 用户文章列表 -->
        <div class="user-posts">
          <h2>文章列表</h2>
          <a-spin :spinning="postsLoading">
            <div v-if="userPosts.length === 0" class="empty-posts">
              <a-empty description="该用户还没有发布文章" />
            </div>
            <div v-else class="posts-list">
              <div 
                v-for="post in userPosts" 
                :key="post.id"
                class="post-item"
                @click="$router.push(`/post/${post.id}`)"
              >
                <div class="post-content">
                  <h3 class="post-title">{{ post.title }}</h3>
                  <p class="post-excerpt">{{ post.excerpt }}</p>
                  <div class="post-meta">
                    <span>{{ formatDate(post.createdAt) }}</span>
                    <span>{{ post.views || 0 }} 次阅读</span>
                  </div>
                </div>
              </div>
            </div>
          </a-spin>
        </div>
      </div>
      
      <div v-else class="not-found">
        <a-result
          status="404"
          title="用户不存在"
          sub-title="抱歉，您访问的用户不存在或已被删除"
        >
          <template #extra>
            <a-button type="primary" @click="$router.push('/')">
              返回首页
            </a-button>
          </template>
        </a-result>
      </div>
    </a-spin>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { userApi } from '@/api'
import type { UserInfo, UserStats } from '@/types'

const route = useRoute()
const userId = Number(route.params.id)

// 响应式数据
const loading = ref(false)
const postsLoading = ref(false)
const userInfo = ref<UserInfo | null>(null)
const userStats = ref<UserStats>({
  joinDate: '',
  postCount: 0,
  likeCount: 0,
  viewCount: 0,
  userId: 0,
  commentCount: 0
})
const userPosts = ref<any[]>([])

// 格式化日期
const formatDate = (dateString?: string) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN')
}

// 加载用户数据
const loadUserData = async () => {
  loading.value = true
  
  try {
    // 加载用户信息
    const userResponse = await userApi.getUserInfo(userId)
    userInfo.value = userResponse.data
    
    // 加载用户统计
    const statsResponse = await userApi.getUserStats(userId)
    userStats.value = statsResponse.data
    
    // 加载用户文章
    postsLoading.value = true
    const postsResponse = await userApi.getUserPosts(userId)
    userPosts.value = postsResponse.data.posts || []
  } catch (error: any) {
    console.error('加载用户数据失败:', error)
    userInfo.value = null
  } finally {
    loading.value = false
    postsLoading.value = false
  }
}

onMounted(() => {
  loadUserData()
})
</script>

<style scoped>
.user-profile-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px;
}

.user-header {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 32px;
  padding: 24px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.user-info h1 {
  margin: 0 0 8px 0;
  font-size: 28px;
  font-weight: 600;
}

.username {
  color: #1890ff;
  font-weight: 500;
  margin: 0 0 12px 0;
}

.bio {
  color: #8c8c8c;
  margin: 0 0 16px 0;
  line-height: 1.6;
}

.user-meta {
  display: flex;
  gap: 16px;
  font-size: 14px;
  color: #8c8c8c;
}

.website {
  color: #1890ff;
  text-decoration: none;
}

.website:hover {
  text-decoration: underline;
}

.user-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.stat-item {
  text-align: center;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stat-number {
  font-size: 24px;
  font-weight: 600;
  color: #1890ff;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #8c8c8c;
}

.user-posts {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.user-posts h2 {
  margin: 0 0 24px 0;
  font-size: 20px;
  font-weight: 600;
}

.posts-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.post-item {
  padding: 16px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.post-item:hover {
  border-color: #1890ff;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
}

.post-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
}

.post-excerpt {
  margin: 0 0 12px 0;
  color: #8c8c8c;
  font-size: 14px;
  line-height: 1.6;
}

.post-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #8c8c8c;
}

.empty-posts {
  text-align: center;
  padding: 40px 0;
}

.not-found {
  text-align: center;
  padding: 60px 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .user-profile-container {
    padding: 16px;
  }
  
  .user-header {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  
  .user-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .user-meta {
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .user-stats {
    grid-template-columns: 1fr;
  }
}
</style>
